
<%@ page language="java" import="java.util.*"
	contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<base href="<%=basePath%>">
<title>环境地图</title>
<LINK href="./css/style.css" type=text/css rel=stylesheet>
<script src="./js/WebCalendar.js" type="text/javascript"></script>
<script src="./js/date.js" type="text/javascript"></script>
<script src="./js/main.js" type="text/javascript"></script>
<script src="./js/jquery-1.7.2.min.js" type="text/javascript"></script>
<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #5CB7FE;
}

#mapwarpper {
	padding: 0;
	height: 500px;
}

.STYLE1 {
	font-size: 12px
}

.error {
	background-color: red;
}

a:link {
	text-decoration: none;
}

a:visited {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:active {
	text-decoration: none;
}

.STYLE5 {
	font-size: 12px;
	color: #FF0000;
}

.STYLE6 {
	font-size: 16px;
	font-weight: bold;
}

#allmap {
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin: 0;
}

#l-map {
	height: 100%;
	width: 78%;
	float: left;
	border-right: 2px solid #bcbcbc;
}

#r-result {
	height: 100%;
	width: 20%;
	float: left;
}
-->
</style>
</head>
<body>
	<table width="100%" height="568" border="0" cellpadding="0"
		cellspacing="0" bordercolor="#D8EDFF">
		<!--DWLayoutTable-->
		<tr>
			<td height="8" colspan="4" valign="top"></td>
			<td width="98%" valign="top"></td>
			<td width="5" valign="top"></td>
		</tr>
		<tr>
			<td height="5" colspan="3" align="right" valign="top"><img
				src="images/icon1.jpg" width="6" height="5" />
			</td>
			<td colspan="2" valign="top"><img src="images/icon2.jpg"
				width="100%" height="5" />
			</td>
			<td valign="top"><img src="images/icon3.jpg" width="5"
				height="5" />
			</td>
		</tr>
		<tr>
			<td width="7" height="523">&nbsp;</td>
			<td width="5" align="right" valign="top"
				background="images/icon5.jpg"><img src="images/icon5.jpg"
				width="5" height="5" />
			</td>
			<td colspan="2" valign="top" bgcolor="#D8EDFF">&nbsp;</td>
			<td valign="top" background="images/main_bg.png">
				<table width="100%" height="100%" border="0" cellpadding="0"
					cellspacing="0" class="STYLE1" bgcolor="#D8EDFF">
					<!--DWLayoutTable-->
					<tr>
						<td height="50" width="300" valign="middle"><span
							class="STYLE1"> &nbsp;日期时间:<input name="date" type="text"
								id="date" onclick="new Calendar().show(this);" size="10"
								maxlength="10" style="width:80px; height:18px;"
								readonly="readonly" value="" /> &nbsp;<select id='time'
								style="width:80px; height:18px;"></select> <input name="Submit2"
								type="submit" id="reQuery" class="btn1_mouseout"
								onMouseOver="this.className='btn1_mouseover'"
								onMouseOut="this.className='btn1_mouseout'" value="更新数据">
						</span>
						</td>
						<td class="STYLE1" width="40%" align="right">&nbsp;&nbsp;污染物:
							PM2.5</td>
						<td><img height="30px" width="260px" src="images/PM2_5.png"
							id="illustration"><span id="unit">(µg/m³)</span>
						</td>
					</tr>
					<tr>
						<td width="98%" height="100%" colspan="4" valign="top">
							<fieldset id="mapwarpper">
								<iframe src ="pm25.jsp" frameborder="0" marginheight="0" marginwidth="0" frameborder="0" scrolling="auto" 
								id="ifm" name="ifm" height="100%" width="100%"></iframe>
							</fieldset></td>
					</tr>
				</table></td>
			<td valign="top" background="images/icon6.jpg"><img
				src="images/icon6.jpg" width="5" height="100" />
			</td>
		</tr>

		<tr>
			<td height="5"></td>
			<td valign="top"><img src="images/icon7.jpg" width="5"
				height="5" />
			</td>
			<td colspan="3" valign="top"><img src="images/icon8.jpg"
				width="100%" height="5" />
			</td>
			<td valign="top"><img src="images/icon9.jpg" width="5"
				height="5" />
			</td>
		</tr>
		<tr>
			<td height="2"></td>
			<td></td>
			<td width="1"></td>
			<td width="6"></td>
			<td></td>
			<td></td>
		</tr>
	</table>
</body>
<script type="text/javascript">
	function getAndShowMapData() {
		var mydata = {};
		mydata["timepoint"] = $("#date").val() + " " + $("#time").val();
		mydata["pollutant"] = "PM2_5";
		$.ajax({
			url : 'envMapData.action?t=' + Math.random(),
			type : 'GET',
			data : mydata,
			dataType : 'json',
			timeout : 10000,
			success : function(data) {
				$("#time").innerHTML = "";
				$.each(data.positionDataMap, function(key, value) {
					if (key == "latestTime") {
						var timepoint = value.split(' ');
						var i;
						$("#date").val(timepoint[0]);
						var latestHour = timepoint[1].split(':')[0];
						var hourVal;
						for (i = 0; i < 24; i++) {
							var hour;
							if (i < 10) {
								hour = "0" + i;
							} else {
								hour = i;
							}
							hourVal = hour + ":00:00";
							$("#time").append(
									"<option value='"+hourVal+"'>" + hourVal
											+ "</option>");
							if (latestHour == hour) {
								$("#time").val(hourVal);
							}
						}
					}
				});
			}
		});
	}

	$(document).ready(function() {
		getAndShowMapData();
		$("#reQuery").click(function(){
		    $("#ifm").attr("src","pm25.jsp?timepoint="+ $("#date").val() + " " + $("#time").val());  
		});
		$("#ifm").load(function(){
			var mainheight = $(this).contents().find("body").height();
			$(this).height(mainheight);
		});
	});
</script>
</html>
